<template>
  <div class="home">
    <!-- 全局组件 -->
    <headed />
    <!-- banner样式 -->
    <div class="banner">
      <el-carousel height="400px">
        <el-carousel-item  v-for="(item, index) in bannerlist" :key="index">
          <img :src="item.cimg" @click="todetails(item)" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 新上好课 -->
    <div class="coueserec">
      <el-tabs v-model="newactiveTab">
        <el-tab-pane label="hot" disabled>
          <span slot="label">
            <img class="hot" src="../assets/images/hot.png" alt="">
          </span>
        </el-tab-pane>

        <el-tab-pane label="推荐" name="rec">
          <ul class="courselist">
            <li @click="todetails(item)" v-for="(item, index) in newcourse.slice(0, 8)" :key="index">
              <img :src="item.cimg" alt="" srcset="">
              <p class="text">{{ item.ctitle }}</p>
              <p class="item">{{ item.ctype }} · {{ item.signup_number }}人报名 </p>
            </li>
          </ul>
        </el-tab-pane>

        <el-tab-pane label="前端开发">
          <ul class="courselist">
            <li @click="todetails(item)" v-for="(item, index) in frontendcourse.slice(0, 8)" :key="index">
              <img :src="item.cimg" alt="" srcset="">
              <p class="text">{{ item.ctitle }}</p>
              <p class="item">{{ item.ctype }} · {{ item.signup_number }}人报名 </p>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="后端后端">
          <ul class="courselist">
            <li @click="todetails(item)" v-for="(item, index) in rearendcourse.slice(0, 8)" :key="index">
              <img :src="item.cimg" alt="" srcset="">
              <p class="text">{{ item.ctitle }}</p>
              <p class="item">{{ item.ctype }} · {{ item.signup_number }}人报名 </p>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 学习路线 -->
    <div class="line">
      <el-tabs v-model="lineactiveTab">
        <el-tab-pane label="hot" disabled>
          <span slot="label">
            <img class="hot" src="@/assets/images/line.png" alt="">
          </span>
        </el-tab-pane>
        <el-tab-pane label="推荐" name="rec">
          <ul class="courselist">
            <li @click="todetails(item)" v-for="(item, index) in linecourse.slice(0, 6)" :key="index">
              <img :src="item.cimg" alt="" srcset="">
              <p class="text">{{ item.ctitle }}</p>
              <div class="linefoot">
                <div class="left">
                  <span>{{ item.ctype }}</span>
                  .
                  <span>{{ item.signup_number }}人报名</span>
                </div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="前端开发">
          <ul class="courselist">
            <li @click="todetails(item)" v-for="(item, index) in frontendcourse.slice(0, 6)" :key="index">
              <img :src="item.cimg" alt="" srcset="">
              <p class="text">{{ item.ctitle }}</p>
              <div class="linefoot">
                <div class="left">
                  <span>{{ item.ctype }}</span>
                  .
                  <span>{{ item.signup_number }}人报名</span>
                </div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="后端后端">
          <ul class="courselist">
            <li @click="todetails(item)" v-for="(item, index) in rearendcourse.slice(0, 6)" :key="index">
              <img :src="item.cimg" alt="" srcset="">
              <p class="text">{{ item.ctitle }}</p>
              <div class="linefoot">
                <div class="left">
                  <span>{{ item.ctype }}</span>
                  .
                  <span>{{ item.signup_number }}人报名</span>
                </div>
              </div>
            </li>

          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>


    <foot />
  </div>
</template>
<style lang="less" scoped>
// banner样式
.banner {
  height: 400px;
  border-radius: 10px;
  cursor: pointer;

  & img {
    width: 100%;
    height: 400px;
    border-radius: 10px;
  }
}

// 新上好课
.coueserec {
  margin-top: @mktop;

  & .hot {
    position: relative;
    top: 12px;
    width: 180px;
  }

  & .courselist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &>li {
      width: 23%;
      margin-top: @mt;
      border-radius: 10px;
      box-shadow: @shadow;
      border: 1px solid #c0c0c0;
      cursor: pointer;

      &>img {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }

      &>p {
        text-align: left;
        margin: @title;
      }

      &>.text {
        width: 90%;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis; //超出带省略号
        display: -webkit-box; //盒子模型显示
        -webkit-line-clamp: 2; //显示2行
        -webkit-box-orient: vertical; //盒子垂直布置
      }

      &>.item {
        font-size: 12px;
        color: #9199a1;
      }
    }
  }
}

// 学习路线
.line {
  margin-top: @mktop;

  & .hot {
    position: relative;
    top: 12px;
    width: 180px;
  }

  & .courselist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &>li {
      width: 31.5%;
      height: 230px;
      margin-top: @mt;
      border-radius: 10px;
      box-shadow: @shadow;
      border: 1px solid #c0c0c0;
      cursor: pointer;

      &>img {
        width: 100%;
        height: 60%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }

      &>p {
        text-align: left;
        margin: @title;
      }

      &>.text {
        width: 90%;
        height: 30px;
        overflow: hidden;
        text-overflow: ellipsis; //超出带省略号
        display: -webkit-box; //盒子模型显示
        -webkit-line-clamp: 2; //显示2行
        -webkit-box-orient: vertical; //盒子垂直布置
      }

      &>.linefoot {
        display: flex;
        margin: @title;

        &>div {
          &>span {
            font-size: 12px;
            color: #9199a1;
          }
        }

        &>.left {
          flex: 8;
          text-align: left;
        }

        &>.right {
          flex: 2;
        }
      }
    }
  }
}
</style>


<script>
export default {
  data() {
    return {
      newactiveTab: "rec",
      lineactiveTab: "rec",
      bannerlist: [],
      newcourse: [],
      frontendcourse: [],
      rearendcourse: [],
      linecourse: [],
    };
  },
  methods: {
    todetails(item) {
      this.$router.push({
        path: './details',
        //传递对应后端数据的id
        query: {
          courseid: item.course_id
        },
      })
    },
  },
  mounted() {
    //banner 
    this.$http.get('http://test.com:3000/course/bannerlist', {})
      .then(
        res => {
          this.bannerlist = res.data
        }
      )

    //新上好课
    this.$http.get('http://test.com:3000/course/newcourse', {})
      .then(
        res => {
          this.newcourse = res.data
        }
      )

    // 前端课程
    this.$http.get('http://test.com:3000/course/frontendcourse', {})
      .then(
        res => {
          this.frontendcourse = res.data;
        }
      )
    //后端课程 
    this.$http.get('http://test.com:3000/course/rearendcourse', {})
      .then(
        res => {
          this.rearendcourse = res.data;
        }
      )
    // 学习路线 linecourse
    this.$http.get('http://test.com:3000/course/linecourse', {})
      .then(
        res => {
          this.linecourse = res.data;
        }
      )

  }

};
</script>